<style lang="less" scoped>
.lesson-detail {
  .img {
    width: 100%;
    height: 150px;
    overflow: hidden;
  }
  .lesson-props {
    .title {
      font-size: 24px;
    }
  }
}
.btns {
  text-align: center;
  margin-top: 20px;
}
</style>

<template>
  <nut-navbar title="订单详情" left-show @click-back="router.back" />
  <div class="lesson-detail">
    <div class="img">
      <nut-image :src="cfg.imageUrl(store.order.thumb)" fit="cover" />
    </div>
    <div class="lesson-props">
      <div class="title">{{ store.order.title }}</div>
      <div class="expired"></div>
      <div class="price">
        <nut-price :price="store.order.price" size="large" />
      </div>
    </div>
  </div>
  <div class="btns">
    <nut-row v-if="store.order.status == 1">
      <nut-col :span="12">
        <nut-button type="primary" plain @click="handlePay">支付</nut-button>
      </nut-col>
      <nut-col :span="12">
        <nut-button type="warning" plain @click="handleCancel">取消</nut-button>
      </nut-col>
    </nut-row>
    <nut-button v-else-if="store.order.status == 2" type="primary" @click="handleStudy">开始学习</nut-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useOrderStore } from '@/stores/order'
import cfg from '@/config/config'
import { showToast } from '@nutui/nutui'

const store = useOrderStore()
const router = useRouter()
const route = useRoute()

onMounted(() => {
  if (route.params.sn && route.params.sn != '') {
    store.getOrder(route.params.sn as string)
  } else {
    router.back()
  }
})

const handlePay = () => {
  showToast.fail('暂未开通支付')
}

const handleCancel = async () => {
  const result = await store.cancel(store.order.id)
  if (result) {
    showToast.success('取消成功', {
      onClose: () => {
        router.push({ name: 'my_order' })
      }
    })
  } else {
    showToast.fail('取消失败')
  }
}

const handleStudy = () => {
    router.push({ name: 'my_lesson_detail', params: { id: store.order.lessonId } })
}
</script>
